<!-- 疫苗接种-->
<template>
	<border cardTitle="随访计划">
		<Chart v-if="!isNull" :optionData="option_column" style="height: 100%"></Chart>
		<div v-else style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
			<img src="/img/dashboard/nullPng.png" alt="" />
		</div>
	</border>
</template>
<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	import {
		bigScreenApi
	} from '@/api/index';
	import * as echarts from 'echarts';
	let colorList = [
		new echarts.graphic.LinearGradient(
			0,
			0,
			1,
			0,
			[{
					offset: 0,
					color: '#1B63CC'
				},
				{
					offset: 1,
					color: '#03DFFC'
				}
			],
			false
		),
		new echarts.graphic.LinearGradient(
			0,
			0,
			1,
			0,
			[{
					offset: 0,
					color: '#05A998'
				},
				{
					offset: 1,
					color: '#63FBFC'
				}
			],
			false
		),
		new echarts.graphic.LinearGradient(
			0,
			0,
			1,
			0,
			[{
					offset: 0,
					color: '#2D5CBD'
				},
				{
					offset: 1,
					color: '#40A0FA'
				}
			],
			false
		),
		new echarts.graphic.LinearGradient(
			0,
			0,
			1,
			0,
			[{
					offset: 0,
					color: '#521DC3'
				},
				{
					offset: 1,
					color: '#9462FF'
				}
			],
			false
		),
		new echarts.graphic.LinearGradient(
			0,
			0,
			1,
			0,
			[{
					offset: 0,
					color: '#0C9B34'
				},
				{
					offset: 1,
					color: '#92FFBD'
				}
			],
			false
		),
		new echarts.graphic.LinearGradient(
			0,
			0,
			1,
			0,
			[{
					offset: 0,
					color: '#DBAE10'
				},
				{
					offset: 1,
					color: '#FFDF69'
				}
			],
			false
		)
	];
	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		data() {
			return {
				option_column: {
					color: ['#65779E'],
					tooltip: {
						position: function(point, params, dom, rect, size) {
							return [point[1], 0];
						},
						trigger: 'axis',
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '15%', //距离dom间距
						right: '10%',
						top: '20%',
						bottom: '10%'
					},
					legend: {
						// 大小 和位置 文字样式
						icon: 'rect',
						itemGap: 20,
						padding: [20, 20],
						itemWidth: 12,
						itemHeight: 12,
						left: 36,
						textStyle: {
							fontSize: 12,
							color: '#fff'
						},
						type: 'scroll',
						pageIconSize: 13
					},
					xAxis: [{
						type: 'value',
						axisPointer: {
							type: 'shadow'
						},
						// 横坐标 分割线等取消显示
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,0.2)'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#999999'
							}
						}
					}],
					yAxis: [{
							type: 'category',
							inverse: true,

							// 纵坐标数据
							data: [],
							yAxisIndex: 0,
							// 横坐标 分割线等取消显示
							axisTick: {
								show: false
							},
							axisLine: {
								show: false
							}
						},
						{
							type: 'category',
							// inverse: true,
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false,
								inside: false
								// verticalAlign: 'bottom',
								// // 位置 上右下左
								// padding: [0, 10, 10, -40],
								// lineHeight: '40',
								// textStyle: {
								// 	fontSize: 20,
								// 	color: '#5D6C8E',
								// 	fontFamily: 'SourceHanSansCN-Regular'
								// }
							},
							// 统计的总量 用纵坐标模拟
							data: [111, 222, 333, 111, 222, 333]
						}
					],
					series: [
						// {
						// 	name: '疫苗1',
						// 	type: 'bar',
						// 	// 宽度
						// 	barWidth: '14',
						// 	// 堆叠
						// 	stack: '总量',
						// 	showBackground: true,
						// 	// 全部背景
						// 	backgroundStyle: {
						// 		color: 'transparent'
						// 	},
						// 	data: [10, 11, 6, 8, 6, 9],
						// 	itemStyle: {
						// 		normal: {
						// 			show: true,
						// 			textStyle: {
						// 				fontSize: 16
						// 			}
						// 		}
						// 	}
						// },
						// {
						// 	name: '疫苗2',
						// 	type: 'bar',
						// 	// 宽度
						// 	barWidth: '14',
						// 	// 堆叠
						// 	stack: '总量',
						// 	showBackground: true,
						// 	// 全部背景
						// 	backgroundStyle: {
						// 		color: 'transparent'
						// 	},
						// 	data: [10, 11, 6, 8, 6, 9],
						// 	itemStyle: {
						// 		normal: {
						// 			show: true,
						// 			textStyle: {
						// 				fontSize: 16
						// 			},
						// 			color: new echarts.graphic.LinearGradient(
						// 				0,
						// 				0,
						// 				1,
						// 				0,
						// 				[
						// 					{
						// 						offset: 0,
						// 						color: '#05A998'
						// 					},
						// 					{
						// 						offset: 1,
						// 						color: '#63FBFC'
						// 					}
						// 				],
						// 				false
						// 			)
						// 		}
						// 	}
						// },
						// {
						// 	name: '疫苗3',
						// 	type: 'bar',
						// 	// 宽度
						// 	barWidth: '14',
						// 	// 堆叠
						// 	stack: '总量',
						// 	showBackground: true,
						// 	// 全部背景
						// 	backgroundStyle: {
						// 		color: 'transparent'
						// 	},
						// 	data: [10, 11, 6, 8, 6, 9],
						// 	label: {
						// 		normal: {
						// 			show: true,
						// 			position: 'right',
						// 			textStyle: {
						// 				color: '#fff',
						// 				fontSize: 12
						// 			}
						// 		}
						// 	},
						// 	itemStyle: {
						// 		normal: {
						// 			show: true,
						// 			textStyle: {
						// 				fontSize: 16
						// 			},
						// 			color: new echarts.graphic.LinearGradient(
						// 				0,
						// 				0,
						// 				1,
						// 				0,
						// 				[
						// 					{
						// 						offset: 0,
						// 						color: '#2D5CBD'
						// 					},
						// 					{
						// 						offset: 1,
						// 						color: '#40A0FA'
						// 					}
						// 				],
						// 				false
						// 			)
						// 		}
						// 	}
						// }
					]
				},
				isNull: true
			};
		},
		props: {
			deptId: {
				type: [String, Number],
				default: '',
				option_column: {}
			}
		},
		watch: {
			deptId: {
				handler(newV, oldV) {
					this.$nextTick(() => {
						this.getInfo();
					});
				},
				immediate: true
			}
		},
		computed: {},

		created() {},
		methods: {
			getInfo() {
				// this.$postAction(bigScreenApi.vaccinationTypeMonthCount + '?deptId=' + this.deptId).then(res => {
				// 	if (res && res.code == 1) {

				// 	}
				// });
				let cowData = {
					healthVaccinationCodeNameBos: [{
						vaccineName: '待随访',
					}, {
						vaccineName: '已随访',
					}, {
						vaccineName: '已过期',
					}],
					healthVaccinationTypeMonthCountBos: [{
						month: '4',
						healthVaccinationTypeCountBoList: [{
							vaccineName: '待随访',
							count: 140
						}, {
							vaccineName: '已随访',
							count: 20
						}, {
							vaccineName: '已过期',
							count: 0
						}]
					}, {
						month: '3',
						healthVaccinationTypeCountBoList: [{
							vaccineName: '待随访',
							count: 0
						}, {
							vaccineName: '已随访',
							count: 130
						}, {
							vaccineName: '已过期',
							count: 30
						}]
					}, {
						month: '2',
						healthVaccinationTypeCountBoList: [{
							vaccineName: '待随访',
							count: 0
						}, {
							vaccineName: '已随访',
							count: 110
						}, {
							vaccineName: '已过期',
							count: 50
						}]
					}, {
						month: '1',
						healthVaccinationTypeCountBoList: [{
							vaccineName: '待随访',
							count: 0
						}, {
							vaccineName: '已随访',
							count: 120
						}, {
							vaccineName: '已过期',
							count: 40
						}]
					}]
				};
				this.isNull = cowData.healthVaccinationCodeNameBos.length == 0 ? true : false;

				let basiceData = [];
				let monthData = [];
				let dataX = [];
				cowData.healthVaccinationCodeNameBos.forEach((item, index) => {
					basiceData.push({
						name: item.vaccineName,
						type: 'bar',
						// 宽度
						barWidth: '14',
						// 堆叠
						stack: '总量',
						showBackground: true,
						// 全部背景
						backgroundStyle: {
							color: 'transparent'
						},
						data: [],
						itemStyle: {
							normal: {
								show: true,
								textStyle: {
									fontSize: 16
								},
								color: colorList[index]
							}
						}
						// label: {
						// 	position: 'insideRight',
						// 	show: true,
						// 	color: '#000'
						// }
					});
				});
				if (basiceData.length > 0) {
					cowData.healthVaccinationTypeMonthCountBos.forEach(item => {
						monthData.push(item.month + '月');
						item.healthVaccinationTypeCountBoList.forEach(son => {
							basiceData.forEach(basic => {
								if (son.vaccineName == basic.name) {
									basic.data.push(son.count);
								}
							});
						});
					});
				}
				if (monthData.length > 0) {
					monthData.forEach((item, index) => {
						let base = 0;
						basiceData.forEach((dataNum, numindex) => {
							base = base + dataNum.data[index];
						});
						dataX.push(base);
					});
					basiceData.push({
						name: '总和',
						type: 'bar',
						stack: 'y', //注意与前面的stack属性不同！！！！
						data: dataX, //为前面对应数据的总和
						label: {
							normal: {
								show: true,
								position: 'right',
								color: '#fff'
							}
						},
						barGap: '-30%' //与堆叠柱条重合
					});
				}
				console.log(monthData, basiceData, dataX);
				this.option_column.yAxis[0].data = monthData;
				this.option_column.series = basiceData;
			},

			details() {
				this.$router.push('/health/vaccination');
			}
		}
	};
</script>

<style scoped lang="less"></style>